<template>
    <!-- 引导页 -->
    <div class="guidePage">
        <van-swipe :loop="false" width="100%" class="my-swpie" :show-indicators="false">
            <van-swipe-item>
                <img src="@/assets/img/banner001.png" alt="" />
                <div class="item">
                    <h2>个性化推荐</h2>
                    <span class="jies">虚...不用多说,你想听的我都知道</span>
                    <div @click="goHome"><span>立即体验</span></div>
                </div>

            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/img/banner002.png" alt="" />
                <div class="item">
                    <h2>精彩评论</h2>
                    <span class="jies">和1亿有趣的人一起听歌看评论</span>
                    <div @click="goHome"><span>立即体验</span></div>
                </div>
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/img/banner003.png" alt="" />
                <div class="item">
                    <h2>千万曲库</h2>
                    <span class="jies">来自全世界的好音乐,尽在耳边</span>
                    <div @click="goHome"><span>立即体验</span></div>
                </div>
            </van-swipe-item>

        </van-swipe>


    </div>
</template>

<script>

export default {
    data() {
        return {
            current: 0,
        }
    },
    methods: {
        onChange(index) {
            this.current = index;
        },
        goHome() {
            this.$router.push("/found");
        },
    },

};
</script>

<style lang="scss">
.custom-indicator {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
}

.guidePage {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;

    .my-swpie {
        height: 100%;
    }

    img {
        width: 100%;
        height: 70%;
        margin: 0 auto;
    }

    .item {
        line-height: 30px;
        margin-top: 20px;

        h2 {
            color: rgb(35, 33, 33);
        }

        .jies {
            color: #a1a1a1;
            font-size: 14px;
        }

        div {
            margin: 20px auto;
            width: 160px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            border-radius: 4px;
            background-color: #db392d;
        }
    }
}
</style>